import { useEffect, useState } from 'react';

// useState 设置初始化状态的方法 - 拆分状态
const App = () => {
  const [rect] = useState({ w: 100, h: 100 })
  const [position, setPosition] = useState({ x: 0, y: 0 })

  // 剧透 useEffect
  useEffect(() => { // componentDidMount componentDidUpdate componentWillUnmount
    function moveHandler (event) {
      console.log(event.clientX, event.clientY)
      setPosition({
        x: event.clientX,
        y: event.clientY
      })
    }
    window.addEventListener('mousemove', moveHandler)
  })

  return (
    <div>
      <div>
        元素宽为{ rect.w }, 高为{ rect.h }
      </div>
      <div>元素的坐标为( { position.x }, { position.y })</div>
    </div>
  );
};

export default App;